import Vue from 'vue'
import store from '@/store'

/**权限指令
 * 用法  v-permitBtn="`1004, 1006`"  多个ID一起判断
 *   v-permitBtn="`1004`"  判断一个ID
 *  v-permitBtn="[`1004`, '文案']"  用文案替换按钮
 *  v-permitBtn="[`1004,3423,5234,23121`, '文案']"  多个ID替换文案
 * **/
const permitBtn = function () {
  return {
    // 指令绑定元素挂载前
    mounted(el, binding, vnode) {
      let userInfo = {}
      if (sessionStorage.getItem('userInfo')) {
        userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      }
      // const butPremissions = permStore().butPremissions;
      const butPremissions = store.state.permission.butPremissions;

      let bindingValue = binding.value
      let text = ''
      if (Array.isArray(binding.value)) {
        bindingValue = binding.value[0]
        text = binding.value[1]
      }
      const bindingList = bindingValue.split(',');

      let nodeTextBool = butPremissions.includes(bindingList[0])
      if (bindingList.length > 1) {
        // 如果传进来的ID 为数组 只要有一个就不做删除
        nodeTextBool = bindingList.some(e => {
          return butPremissions.includes(e)
        })
      }
      if (butPremissions.length && !nodeTextBool && !userInfo.isAdmin) {
        if (text) {
          var node1 = document.createTextNode(text);  //创建文本节点
          el.parentNode.appendChild(node1)
        }
        el.parentNode.removeChild(el);
      }
    }
  }
}
Vue.directive('permitBtn', permitBtn)



// 点击盒子外部区域  关闭盒子
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() { },
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  },
}
Vue.directive('myclickoutside', clickoutside)